<template>
	<view>
		<form class='container' bindsubmit='formSubmit' report-submit="true">
		  <scroll-view scroll-y scroll-into-view="" class='newsContainer' id='newsContainer'>
		    <view>
		      <view>
		        <view class='date'>
		          <text></text>
		        </view>
		        <view class='news'>
		          <image class='userImg' src=''></image>
		
		          <view class='content'>
		
		            <view class='text1'></view>
		            <view class='productCon'>
		              <image class='productImg' src='' data-src="" catchtap='previewImg'></image>
		            </view>
		          </view>
		        </view>
		      </view>
		    </view> 
		
		  </scroll-view>
		  <form class='foot' style='' bindsubmit='sendmsg' report-submit="true">
		    <view class='footCon'>
		
		      <input type='text' placeholder='输入内容...' bindfocus="textAreaFocus" bindblur="textAreaBlur" value='' confirm-hold='' bindinput='msginput' cursor-spacing='0'></input>
		      <view class='footViewCon'>
		        <button form-type='submit' class='footBtn'>
		          <view class='footView'>
		            <form report-submit="true">
		              <view class='footView'>发送</view>
		            </form>
		          </view>
		        </button>
		      </view>
		    </view>
		  </form>
		</form>
	</view>
</template>

<script>
	/**
	 * jack 连接服务器websocket js文件
	 */
	
// 	var websocket = '';
// 	var ajaxPageNum = 1;
// 	var last_health;
// 	var health_timeout = 10;
// 	var tDates = [], tData = [];
// 	var rightIndex;
// 	if (window.WebSocket) {
// 		// 创建websocket连接  当前连接协议 ip 端口
// 	    websocket = new WebSocket(
// 	            encodeURI('ws://' + document.domain + ':8888'));
// 	    websocket.onopen = function() {
// 	        console.log('已连接');
// 	        // 作为标识告诉服务器
// 	        websocket.send("onlinejack");
// 	        // 心跳机制 每分钟连接服务器
// 	        heartbeat_timer = setInterval(function() {
// 	            keepalive(websocket)
// 	        }, 60000);
// 	    };
// 	    websocket.onerror = function() {
// 	        console.log('连接发生错误');
// 	    };
// 	    websocket.onclose = function() {
// 	        console.log('已经断开连接');
// 	        initWs();
// 	    };
// 	    // 消息接收 接收到服务器websocket发来的消息
// 	    websocket.onmessage = function(message) {
// 	        console.log(message)
// 	        console.log(message.data)
	        
// 	        var jsonMsg = JSON.parse(message.data);
// 	        console.log(jsonMsg);
// 	        // 业务代码
// 	    };
// 	}else {
//     alert("该浏览器不支持提醒。<br/>建议使用高版本的浏览器，<br/>如 IE10、火狐 、谷歌  、搜狗等");
// }

// 上面的代码封装
// var initWs = function() {
//     if (window.WebSocket) {
//         websocket = new WebSocket(
//                 encodeURI('ws://' + document.domain + ':8888'));
//         websocket.onopen = function() {
//             console.log('已连接');
//             websocket.send("onlinejack");
//             heartbeat_timer = setInterval(function() {
//                 keepalive(websocket)
//             }, 60000);
//         };
//         websocket.onerror = function() {
//             console.log('连接发生错误');
//         };
//         websocket.onclose = function() {
//             console.log('已经断开连接');
//             initWs();
//         };
//         // 消息接收
//         websocket.onmessage = function(message) {
//             console.log(message)
//             console.log(message.data)
//             // 业务代码
//         };
//     } else {
//         alert("该浏览器不支持提醒。<br/>建议使用高版本的浏览器，<br/>如 IE10、火狐 、谷歌  、搜狗等");
//     }
// }
// 心跳包
// function keepalive(ws) {
//     var time = new Date();
//     if (last_health != -1 && (time.getTime() - last_health > health_timeout)) {
//         // ws.close();
//     } else {
//         if (ws.bufferedAmount == 0) {
//             ws.send('connect again from jack...');
//         }
//     }
// }
	export default {
		data() {
			return {
				
			}
		},
		
		
		methods: {
			
		}
	}
</script>

<style>
page{
  background: #f5f5f5;
}
.headBtnCon{
  width: 100%;
  height: 100rpx;
  border-bottom: 1px solid #eee;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.headBtnCon .headBtn{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: #999;
}
.headBtnCon .headBtn button{
  font-size: 24rpx;
  color: #999;
}
.headBtnCon .headBtn image{
  width: 40rpx;
  height: 40rpx;
}
.newsContainer{
  height: calc(100vh - 280rpx);
  width: 100%;
  box-sizing: border-box;
  padding: 20rpx 20rpx 20rpx; 
}
/* .scrollTop{
  height: calc(100vh - 280rpx - 400rpx);
} */
.date{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-bottom: 30rpx;
}
.date text{
  line-height: 40rpx;
  padding: 0 30rpx;
  background: #ddd;
  font-size: 24rpx;
  color: #fff;
  border-radius: 20rpx;
  text-align: center;
}
.news{
  margin-bottom: 50rpx;
}
.news::after{
  content:"";
  display:block;
  visibility:hidden;
  height:0;
  clear:both;
}
.right>image{
  float: right;
  margin-left: 20rpx;
}
.right>view{
  float: right;
}
.left>image{
  float: left;
  margin-right: 20rpx;
}
.left>view{
  float: left;
}

.userImg{
  width: 80rpx;
  height: 80rpx;
}
.content{
  max-width: calc(100% - 200rpx);
  /* background: #fff; */
  box-sizing: border-box;
  padding: 20rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
}
.text{
  line-height: 1.7;
}

.contentBtn{
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 16rpx 30rpx;
  margin-top: 16rpx;
  border: 1px solid #eee;
}
.contentBtn image{
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}

.content1{
  display: flex;
  flex-direction: row;
  align-items: center;
}

.productCon{
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.productImg{
  width: 80rpx;
  height: 80rpx;
}
.content1 .text{
  width: calc(100% - 100rpx);
}
.text1{
  word-break: break-all;
}


.content2{
  color: #fff;
  background: #1AAD19;
  padding: 10rpx 20rpx;
}

.want{
  position: fixed;
  left: 0;
  bottom: 100rpx;
  right: 0;
  width: 100%;
  height: 80rpx;
  background: #f0f0f0;
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
  padding: 0 30rpx;
  color: #666;
  font-size: 24rpx;
}
.want.wantTop{
  bottom: calc(100rpx + 200px);
}
.want view{
  width: 80rpx;
}
.want button{
  font-size: 24rpx;
  line-height: 50rpx;
  padding: 0 15rpx;
  border-radius: 50rpx;
  border: 1px solid #ccc;
  margin-right: 20rpx;
}

.foot{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100rpx;
  background: #fff;
  display: block;
}
.footTop{
  bottom: 200px;
}
.foot .footCon{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 10rpx 20rpx;
}
.addImg{
  width: 50rpx;
  height: 50rpx;
  margin-right: 20rpx;
}
.foot input{
  width: calc(100% - 150rpx);
  height: 80rpx;
  background: #f5f5f5;
  box-sizing: border-box;
  padding: 0 20rpx;
}
.footBtn {
  width: 120rpx;
  height: 80rpx;
  margin: 0;
  padding: 0;
  border-radius: 0;
  position:absolute;
  top: 0;
  left: 0;
}
.footViewCon{
  width: 120rpx;
  background: #1AAD19;
  color: #fff;
  line-height: 80rpx;
  height: 80rpx;
  position: relative;
}
.footView{
  width: 120rpx;
  background: #1AAD19;
  color: #fff;
  line-height: 80rpx;
  height: 80rpx;
  position: absolute;
}
.home{
  position: fixed;
  bottom: 200rpx;
  right: 10rpx;
  width: 80rpx;
  height: 80rpx;
  background: #1AAD19;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  z-index: 10;
}
.home image{
  width: 50rpx;
  height: 50rpx;
}


.emoji-box {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 200px;
  padding: 5px 0;
  box-sizing: border-box;
  display: none;
}
.emoji-box.emojiShow{
  display: block;
}

.emoji-cell {
  width: 9.09%;
  height: 33px;
  display: inline-block;
}

.emoji-cell image {
  width: 23px;
  height: 23px;
  padding: 5px;
  border-radius: 3px;
}

.emoji-move-in {
  -webkit-animation: emoji-move-in 0.3s forwards;
  animation: emoji-move-in 0.3s forwards;
}

.emoji-move-out {
  -webkit-animation: emoji-move-out 0.3s forwards;
  animation: emoji-move-out 0.3s forwards;
}

.no-emoji-move {
  -webkit-animation: none;
  animation: none;
}

@-webkit-keyframes emoji-move-in {
  0% {
    margin-bottom: -200px;
  }

  100% {
    margin-bottom: 0;
  }
}

@keyframes emoji-move-in {
  0% {
    margin-bottom: -200px;
  }

  100% {
    margin-bottom: 0;
  }
}

@-webkit-keyframes emoji-move-out {
  0% {
    margin-bottom: 0;
  }

  100% {
    margin-bottom: -200px;
  }
}

@keyframes emoji-move-out {
  0% {
    margin-bottom: 0;
  }

  100% {
    margin-bottom: -200px;
  }
}

@-webkit-keyframes pd-left-move {
  0% {
    padding-left: 5px;
  }

  100% {
    padding-left: 15px;
  }
}

@keyframes pd-left-move {
  0% {
    padding-left: 5px;
  }

  100% {
    padding-left: 15px;
  }
}


.messages-bg{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,.8);
}
.messages-wrap{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  transition: all .2s ease-out;
  z-index:9999;
}
.addMessages{line-height: 90rpx;font-size: 31rpx;color: #573B2D;text-align: center;box-sizing: border-box;border-bottom: 1px solid #eee;position: relative;}
.addMessages span{position: absolute;right: 30rpx;color: #333;font-size: 28rpx;top: 0;line-height: 90rpx;}
.message_wrap{display: flex;justify-content: space-between;}
.leftCon{width: 240rpx;background-color: #F5F5F7;height: calc(60vh - 92rpx);}
.rightCon{flex: 1;overflow: hidden;height: calc(60vh - 92rpx);box-sizing: border-box;padding: 0 25rpx;}
.leftCon .item{text-align: center;line-height: 85rpx;font-size: 31rpx;color: #333;}
.leftCon .active{background-color: #fff;color: #573B2D !important;}
.rightCon .info-item{border-bottom: 1px solid #eee;padding: 22rpx 0;font-size: 31rpx;color: #333;}
</style>
